import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/page/common/common_nodata_widget.dart';
import 'package:get/get.dart';

import '../../../bean/bean_day_stat.dart';
import '../../common/common_loading_dialog.dart';
import 'controller/question_details_controller.dart';

class QusetionDetailsPage extends StatefulWidget {
  final int id;

  const QusetionDetailsPage({Key key, @required this.id}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _QusetionDetailsPageState();
  }
}

class _QusetionDetailsPageState extends State<QusetionDetailsPage> {
  @override
  void initState() {
    super.initState();
    Get.put(QuestionDetailsController(widget.id));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("详情"),
      ),
      backgroundColor: Colors.white,

      ///填充布局
      body: RefreshIndicator(
        onRefresh: () async {
          Get.find<QuestionDetailsController>().onPullRefresh();
          return true;
        },
        child: Padding(
          padding: EdgeInsets.only(top: 26, left: 12, right: 12),
          child: GetBuilder(
            builder: (QuestionDetailsController controller) {
              return buildAnimatedSwitcher(context, controller);
            },
          ),
        ),
      ),
    );
  }

  ///AnimatedSwitcher 的基本使用
  ///AnimatedSwitcher 的基本使用
  AnimatedSwitcher buildAnimatedSwitcher(
      BuildContext context, QuestionDetailsController controller) {
    return AnimatedSwitcher(
      //动画执行切换时间
      duration: const Duration(milliseconds: 400),

      //动画构建器 构建指定动画类型
      transitionBuilder: (Widget child, Animation<double> animation) {
        //执行缩放动画
        return FadeTransition(child: child, opacity: animation);
      },
      //执行动画的子 Widget
      //只有子 Widget 被切换时才会触发动画
      child: buildListView(controller),
    );
  }

  Widget buildListView(QuestionDetailsController controller) {
    if (controller.isLoading) {
      return Center(
        child: LoadingWidget(),
      );
    }
    BeanDayStat beanDayStat = controller.newsBean;
    if (beanDayStat == null) {
      return Center(
        child: NoDataWidget(),
      );
    }
    String options = beanDayStat.options;
    List<Widget> optionWidgetList = [];
    var pareOptions = jsonDecode(options);
    String opStr = "";
    for (int i1 = 0; i1 < pareOptions.length; i1++) {
      opStr += pareOptions[i1];
    }
    if (opStr.length > 0) {
      List stringList = ["A", "B", "C", "D", "E", "F", "G", "H"];
      for (int i = 0; i < pareOptions.length; i++) {
        String index = stringList[i];
        optionWidgetList.add(
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                alignment: Alignment.center,
                margin: EdgeInsets.only(right: 2),
                height: 14,
                width: 14,
                decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                child: Text(
                  index,
                  style: TextStyle(fontSize: 10),
                ),
              ),
              Expanded(
                child: Text(
                  pareOptions[i].replaceAll("<p>", "").replaceAll("<\/p>", ""),
                  style: TextStyle(fontSize: 12),
                ),
              ),
            ],
          ),
        );
      }
    }
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          "${beanDayStat.titleText}",
          style: TextStyle(color: Colors.black, fontSize: 14),
        ),
        Wrap(
          children: [
            Text(
              "【正确答案是 ",
              style: TextStyle(
                color: Colors.black,
                fontSize: 14,
              ),
            ),
            Text(
              "${beanDayStat.answer}】",
              style: TextStyle(color: Colors.black, fontSize: 14),
            ),
          ],
        ),
        optionWidgetList.length > 0
            ? Container(
                margin: EdgeInsets.only(top: 8),
                padding: EdgeInsets.all(4),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.all(Radius.circular(2))),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "本题的选项是",
                      style: TextStyle(color: Colors.black, fontSize: 14),
                    ),
                    SizedBox(height: 10),
                    ...optionWidgetList
                  ],
                ),
              )
            : Container(),
      ],
    );
  }
}
